<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Radial Layout</title>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script src="../build/radial.js"></script>
    <script>
      const data = {
        nodes: [{
          id: "0",
          label: "0",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "1",
          label: "1",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "2",
          label: "2",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "3",
          label: "3",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "4",
          label: "4",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "5",
          label: "5",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "6",
          label: "6",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "7",
          label: "7",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "8",
          label: "8",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "9",
          label: "9",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "10",
          label: "10",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "11",
          label: "11",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "12",
          label: "12",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "13",
          label: "13",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "14",
          label: "14",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "15",
          label: "15",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "16",
          label: "16",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "17",
          label: "17",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "18",
          label: "18",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "19",
          label: "19",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "20",
          label: "20",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "21",
          label: "21",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "22",
          label: "22",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "23",
          label: "23",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "24",
          label: "24",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "25",
          label: "25",
          sortAttr: 0,
          sortAttr2: 'a'
        },
        {
          id: "26",
          label: "26",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "27",
          label: "27",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "28",
          label: "28",
          sortAttr: 3,
          sortAttr2: 'd'
        },
        {
          id: "29",
          label: "29",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "30",
          label: "30",
          sortAttr: 2,
          sortAttr2: 'c'
        },
        {
          id: "31",
          label: "31",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "32",
          label: "32",
          sortAttr: 1,
          sortAttr2: 'b'
        },
        {
          id: "33",
          label: "33",
          sortAttr: 0,
          sortAttr2: 'a'
        }],
        edges: [
        {
          source: "0",
          target: "1"
        },
        {
          source: "0",
          target: "2"
        },
        {
          source: "0",
          target: "3"
        },
        {
          source: "0",
          target: "4"
        },
        {
          source: "0",
          target: "5"
        },
        {
          source: "0",
          target: "7"
        },
        {
          source: "0",
          target: "8"
        },
        {
          source: "0",
          target: "9"
        },
        {
          source: "0",
          target: "10"
        },
        {
          source: "0",
          target: "11"
        },
        {
          source: "0",
          target: "13"
        },
        {
          source: "0",
          target: "14"
        },
        {
          source: "0",
          target: "15"
        },
        {
          source: "0",
          target: "16"
        },
        {
          source: "2",
          target: "3"
        },
        {
          source: "4",
          target: "5"
        },
        {
          source: "4",
          target: "6"
        },
        {
          source: "5",
          target: "6"
        },
        {
          source: "7",
          target: "13"
        },
        {
          source: "8",
          target: "14"
        },
        {
          source: "9",
          target: "10"
        },
        {
          source: "10",
          target: "22"
        },
        {
          source: "10",
          target: "14"
        },
        {
          source: "10",
          target: "12"
        },
        {
          source: "10",
          target: "24"
        },
        {
          source: "10",
          target: "21"
        },
        {
          source: "10",
          target: "20"
        },
        {
          source: "11",
          target: "24"
        },
        {
          source: "11",
          target: "22"
        },
        {
          source: "11",
          target: "14"
        },
        {
          source: "12",
          target: "13"
        },
        {
          source: "16",
          target: "17"
        },
        {
          source: "16",
          target: "18"
        },
        {
          source: "16",
          target: "21"
        },
        {
          source: "16",
          target: "22"
        },
        {
          source: "17",
          target: "18"
        },
        {
          source: "17",
          target: "20"
        },
        {
          source: "18",
          target: "19"
        },
        {
          source: "19",
          target: "20"
        },
        {
          source: "19",
          target: "33"
        },
        {
          source: "19",
          target: "22"
        },
        {
          source: "19",
          target: "23"
        },
        {
          source: "20",
          target: "21"
        },
        {
          source: "21",
          target: "22"
        },
        {
          source: "22",
          target: "24"
        },
        {
          source: "22",
          target: "25"
        },
        {
          source: "22",
          target: "26"
        },
        {
          source: "22",
          target: "23"
        },
        {
          source: "22",
          target: "28"
        },
        {
          source: "22",
          target: "30"
        },
        {
          source: "22",
          target: "31"
        },
        {
          source: "22",
          target: "32"
        },
        {
          source: "22",
          target: "33"
        },
        {
          source: "23",
          target: "28"
        },
        {
          source: "23",
          target: "27"
        },
        {
          source: "23",
          target: "29"
        },
        {
          source: "23",
          target: "30"
        },
        {
          source: "23",
          target: "31"
        },
        {
          source: "23",
          target: "33"
        },
        {
          source: "32",
          target: "33"
        }]
      };

      const usingData = data;
      focusNode = usingData.nodes[0];
      focusNode.style = {
        fill: '#0a0'
      }

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        layout: {
          type: 'radial',
          center: [500, 300],
          maxIteration: 1000,
          focusNode,
          unitRadius: 100,
          linkDistance: 10,
          preventOverlap: true,
          nodeSize: 30,
          sortBy: 'sortAttr2',
          sortStrength: 50
        },
        modes: {
          default: [ 'drag-node' ]
        },
        // defaultNode: {
        //   size: [20, 20],
        //   color: 'steelblue',
        //   style: {
        //     lineWidth: 2,
        //     fill: '#fff'
        //   }
        // },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4
            }
          }
        },
        nodeStateStyle: {
          selected: {
            fill: 'steelblue'
          }
        }
      });
      const colors = ['steelblue', 'green', 'pink', 'yellow'];
      const colorsObj = { a: 'steelblue', b: 'green', c: 'pink', d: 'yellow' };
      usingData.nodes.forEach(node => {
        node.size = 20;
        node.style = {
          lineWidth: 2,
          fill: '#fff',
          stroke: colors[node.sortAttr2] || colorsObj[node.sortAttr2]
        }
      });
      graph.data(usingData);
      graph.render();
    </script>
  </body>
</html>